<div class="modal-header">
	<h3 class="modal-title">{{ 'Import model' | translate }}</h3>
	<img
		src="../../img/loading-dots.gif"
		alt="Loading"
		class="br-loader"
		ng-class="{'loading': $ctrl.loading}"
	/>
</div>

<div class="modal-body">
	<aside class="feedback">
		<div class="alert alert-danger" role="alert" data-ng-class="{'hide': !$ctrl.feedback.showing}">
			<p>
				{{ 'It was not possible to import this model.' | translate}} <br/>
				{{ 'The URL may not be correct or the model does not allow import.' | translate}}
			</p>
		</div>
	</aside>
	<form class="form-horizontal" role="form" name="modelForm">
		<div class="form-group">
			<label for="import-model" class="col-sm-3 control-label">{{ 'URL' | translate }}</label>
			<div class="col-sm-7">
				<input
					class="form-control"
					ng-class="{'error': (!$ctrl.valid && $ctrl.submitted)}"
					type="text"
					id="import-model"
					autocomplete="off"
					placeholder="https://app.brmodeloweb.com/#!/publicview/{hash}"
					data-ng-model="$ctrl.url"
				/>
				<p class="note">{{ 'Please insert the URL to import' | translate }}</p>
			</div>
		</div>
	</form>
</div>

<div class="modal-footer">
	<button class="br-button yellow" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
	<button class="br-button" type="button" ng-click="$ctrl.save($ctrl.url)">{{ 'Import' | translate }}</button>
</div>